<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import {
    addFlashPromotion,
    updateFlashPromotion,
} from '@/api/flashPromotion';
import { uploadFile } from '@/api/file';
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import { clearFormData } from '@/utils/utils';
const props = defineProps({
    dialog: {
        required: true,
        type: Object,
        default: {}
    },
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { dialog, formData } = props
const emit = defineEmits(['resetQuery'])

const uploadIconRef = ref();
const dataFormRef = ref(ElForm);

const statusList = ref<any>([]);
const rules = reactive({
    title: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
    startEndTime: [{
        required: true,
        message: '不能为空',
        trigger: 'blur',
    }],
});


/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();
    }
    clearFormData(formData);
    formData.status = 1
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            if (formData.id) {
                updateFlashPromotion(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            } else {
                addFlashPromotion(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            }

        }
    });
}

watch(
    () => formData.startEndTime,
    (val: any) => {
        if (Array.isArray(val)) {
            formData.startDate = val[0];
            formData.endDate = val[1];
        } else {
            formData.startDate = '';
            formData.endDate = '';
        }
    }
);


onMounted(() => {

});
</script>

<template>
    <div>
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" @close="closeDialog">
            <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
                <el-form-item label="品牌名" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="首字母" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="排序" prop="title">
                    <el-input-number v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="status" label="是否为品牌制造商">
                    <el-select v-model="formData.status" placeholder="请选择">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="status" label="是否显示">
                    <el-select v-model="formData.status" placeholder="请选择">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="活动标题" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="活动标题" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="产品数量" prop="title">
                    <el-input-number v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="产品评论数量" prop="title">
                    <el-input-number v-model="formData.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="品牌故事" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入" />
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.a-class {
    color: dodgerblue;
    margin-left: 10px;
}

.el-form-item .el-select {
    width: 100%;
}

.upload-demo .upload-demo-img {
    width: 100px;
    height: 100px;
    display: block;
}

:deep(.el-upload-list) {
    display: none !important;
}
</style>

<style>
.upload-demo .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.upload-demo .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.upload-demo-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>